<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>组织机构图</title>
<link href="<%=request.getContextPath()%>/css/Default.css"
	rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/jquery.jOrgChart.css"
	rel="stylesheet" type="text/css"></link>
<link
	href="<%=request.getContextPath()%>/css/redmond/jquery-ui-1.8.14.custom.css"
	rel="stylesheet" type="text/css"></link>
<link href="<%=request.getContextPath()%>/css/Dialog.css"
	rel="stylesheet" type="text/css"></link>
<script src="<%=request.getContextPath()%>/scripts/jquery-1.5.1.min.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/scripts/jquery-ui-1.8.14.min.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/scripts/jquery.jOrgChart.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/scripts/Dialog.js"
	type="text/javascript"></script>
<script type="text/javascript">
	jQuery(document).ready(function() {
		initGroupDiagram();
		//$("#org").jOrgChart({
			//chartElement : '#chart'
		//});
		/* Extra Code */
		/* $("#show-list").click(function(e) {
			e.preventDefault();
			$('#list-html').toggle('fast', function() {
				if ($(this).is(':visible')) {
					$('#show-list').text('Hide underlying list.');
					$(".topbar").fadeTo('fast', 0.9);
				} else {
					$('#show-list').text('Show underlying list.');
					$(".topbar").fadeTo('fast', 1);
				}
			});
		}); */
	});
	function initGroupDiagram(){
		$.ajax({
			type : "GET",
			url : '<%=request.getContextPath()%>/group.do?method=getGroupDiagram',
					dataType : "json",
					success : function(data) {
						if (data['status'] == 'ERROR') {
							createAlertDialog('提示信息', '获取组织机构图失败!');
						} else {
							$(data['ul']).appendTo($("body")).css({"display":"none"}).jOrgChart({
								chartElement : '#chart1'
							});
						}
					},
					error : function() {
						createAlertDialog('提示信息', '网络繁忙,请稍后再试!');
					}
				});
	}
</script>
</head>
<body>
	<ul id="org" style="display: none">
		<li>Food
			<ul>
				<li>Beer</li>
				<li>Vegetables
					<ul>
						<li>Pumpkin</li>
						<li>test</li>
					</ul>
				</li>
				<li>Fruit
					<ul>
						<li>Apple
							<ul>
								<li>Granny Smith</li>
							</ul>
						</li>
						<li>Berries
							<ul>
								<li>Blueberry</li>
								<li>123</li>
								<li>Cucumber</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>Bread</li>
				<li>Chocolate
					<ul>
						<li>Topdeck</li>
						<li>Reese's Cups Reese's CupsReese's</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
	<center>
		<br /> <br />
<!-- 		<div id="chart" class="orgChart"></div> -->
		<div id="chart1" class="orgChart"></div>
	</center>
</body>
</html>